import Vue,{VNode,VueConstructor} from 'vue';
import Icon from '../icon';
import {QResizeObserver} from 'quasar';
import {SizeObj} from '../../../../types';
export type Direction='left'|'right';
/**
 * 定义非响应数据
 * @property {Direction|undefined} movingDirection	移动方向
 * @property {boolean} waitToRun	是否有等待执行的帧
 */
export interface ArrowScrollVue extends Vue{
	movingDirection:Direction|null,
	waitToRun:boolean,
}
/**
 * 箭头滚动(当超过容器宽度字段出现箭头滚动)
 * @author 唐国雄
 * @date 2021/8/9
 * 插槽----------------------
 * #left		左箭头插槽
 * #right		右箭头插槽
 */
export default (Vue as VueConstructor<ArrowScrollVue>).extend({
	name:'ArrowScroll',
	data(){
		return {
			//容器宽度
			containerWidth:0,
			//内容容器宽度
			offsetWidth:0,
			//内容宽度
			scrollWidth:0,
			//当前滚动距离
			scrollLeft:0,
		};
	},
	computed:{
		classes():string{
			return 'lexmis-ArrowScroll'+
				(this.scrollLeft<=0||this.scrollLeft>=this.scrollWidth-this.offsetWidth?' lexmis--disabled':'');
		},
	},
	watch:{
		scrollLeft(val){
			(this.$refs.content as HTMLElement).scrollLeft=val;
		},
		offsetWidth(){
			this.scrollLeft=(this.$refs.content as HTMLElement).scrollLeft;
		},
		scrollWidth(){
			this.scrollLeft=(this.$refs.content as HTMLElement).scrollLeft;
		},
	},
	methods:{
		$_lexmis_startMove(direction:Direction){
			if(this.movingDirection==null&&!this.waitToRun){
				requestAnimationFrame(this.$_lexmis_moving);
			}
			this.movingDirection=direction;
		},
		$_lexmis_stopMove(){
			this.movingDirection=null;
		},
		$_lexmis_moving(){
			this.waitToRun=false;
			const {movingDirection,scrollWidth,offsetWidth}=this;
			if(movingDirection==null) return;
			const newScrollLeft=this.scrollLeft+(movingDirection==='left'?8:-8);
			this.scrollLeft=Math.max(0,Math.min(newScrollLeft,scrollWidth-offsetWidth));
			requestAnimationFrame(this.$_lexmis_moving);
			this.waitToRun=true;
		}
	},
	render(h):VNode{
		const {
			classes,
			containerWidth,
			scrollWidth,
			offsetWidth,
			scrollLeft,
			$scopedSlots:{left,right}
		}=this;
		return h('div',{
			staticClass:classes,
		},[
			containerWidth<scrollWidth
				?h('div',{
					staticClass:'lexmis_left_arrow'+
						(scrollLeft<=0?' lexmis--disabled':''),
					on:{
						mousedown:() => {
							this.$_lexmis_startMove('right');
						},
						mouseup:this.$_lexmis_stopMove,
						mouseleave:this.$_lexmis_stopMove,
					}
				},[
					left
						?left(undefined)
						:h(Icon,{
							props:{
								name:'arrow_back_ios'
							}
						})
				])
				:null,
			h('div',{
				staticClass:'lexmis_scroll',
				ref:'content'
			},[
				h('div',{
					staticClass:'lexmis_content',
				},[
					this.$slots.default,
					h(QResizeObserver,{
						props:{
							debounce:200,
						},
						on:{
							resize:({width}:SizeObj) => {
								this.scrollWidth=width;
							}
						}
					})
				]),
				h(QResizeObserver,{
					props:{
						debounce:200,
					},
					on:{
						resize:({width}:SizeObj) => {
							this.offsetWidth=width;
						}
					}
				})
			]),
			containerWidth<scrollWidth
				?h('div',{
					staticClass:'lexmis_right_arrow'+
						(scrollLeft>=scrollWidth-offsetWidth?' lexmis--disabled':''),
					on:{
						mousedown:() => {
							this.$_lexmis_startMove('left');
						},
						mouseup:this.$_lexmis_stopMove,
						mouseleave:this.$_lexmis_stopMove,
					}
				},[
					right
						?right(undefined)
						:h(Icon,{
							props:{
								name:'arrow_forward_ios'
							}
						})
				])
				:null,
			h(QResizeObserver,{
				props:{
					debounce:100,
				},
				on:{
					resize:({width}:SizeObj) => {
						this.containerWidth=width;
					}
				}
			})
		]);
	}
});